<!DOCTYPE HTML> 
<html lang="en-us"> 
  <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>Fx example</title> 
    <style type="text/css" media="screen"> 
      body {
        font: 12px/1.5 Tahoma, Arial, "宋体b8b\4f53", sans-serif;
      }
      button {
        padding: 4px;
        width: 50px;
        cursor: pointer;
      }
      h1,h2 {
        font-weight: 600;
        margin: 0;
        padding: 0;
      }
      h1 {
        font-size: 36px;
      }
      #doc {
        width: 600px;
        margin: 0 auto;
      }
      .stage {
        padding: 50px;
        background: #eee;
        border-radius: 5px;
        border: 1px solid #bbb;
        margin: 15px 0;
        position: relative;
        overflow: hidden;
      }
      .box {
        top: 0;
        left: 0;
        position: relative;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: #f00;
        margin: 5px 0;
        border: 1px solid #999;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
      }
      #last {
        margin-bottom: 100px;
      }
    </style> 

	<script src="../../src/jx.core.js"></script>
    <script src="../../src/jx.nfx.js" type="text/javascript"></script> 

  </head> 
  <body> 
    <div id="doc"> 
      <h1>Fx Examples</h1> 
 
      <div class="stage"> 
        <h2><span>普通<span></h2> 
        <div id="ex1" class="box"></div> 
        <button id="go-ex1">Go</button> 

      </div> 
 
      <div class="stage"> 
        <h2>颜色变化</h2> 
        <div id="ex3" class="box"></div> 
        <button id="go-ex3">Go</button> 
 
      </div> 
 
      <div class="stage"> 
        <h2>运动 + 颜色变化</h2> 
        <div id="ex2" class="box"></div> 
        <button id="go-ex2">Go</button> 

      </div> 
 
      <div class="stage"> 
        <h2>自定义单位：比如 em</h2> 
        <div id="ex4" style="font-size: 1.2em;left: 200px;position: absolute;">hello world</div> 
        <button id="go-ex4">Go</button> 

      </div> 
 
      <div class="stage"> 
        <h2>贝塞尔曲线支持</h2> 
        <div id="ex5" class="box"></div> 
        <button id="go-ex5">Go</button> 

      </div> 
 
      <div class="stage"> 
        <h2>多元素同时变化</h2> 
        <div id="ex6"> 
          <div data-to="#0f0" class="box"></div> 
          <div data-to="#00c" class="box"></div> 
        </div> 
        <button id="go-ex6">Go</button> 

      </div> 
 
      <div class="stage"> 
        <h2>animation stop 控制</h2> 
        <div style="width:100px;height:100px;" id="ex7" class="box"></div> 

      </div> 
 
      <div class="stage" id="last"> 
        <h2>css3 transform 支持</h2> 
        <div id="ex8-scale" class="box">scale</div> 
        <div id="ex8-rotate" class="box">rotate</div> 
        <div id="ex8-skew" class="box">skew</div> 
        <div id="ex8-translate" class="box">translate</div> 
        <button id="go-ex8">Go</button> 
        <button id="reset-ex8">Reset</button> 

      </div> 
 
    </div> 
	
	<script type="text/javascript"> 	
	Jx().$package(function (J) {
		var $fx = J.fx,
			fx = $fx.animate,
			easings = $fx.easings;
		function id(el) {
			return document.getElementById(el)
		}
		
		//1
		id('go-ex1').onclick = function () {
            id('go-ex1').disabled = true
            id('ex1').style.left = 0
            fx(id('ex1'), {
              left: 400,
              complete: function () {
                id('go-ex1').disabled = false
              }
            })
          }
		//2
		id('go-ex3').onclick = function () {
            id('go-ex3').disabled = true
            id('ex3').style.backgroundColor = '#f00'
            fx(id('ex3'), {
              backgroundColor: '#00f',
              duration: 2000,
              complete: function () {
                id('go-ex3').disabled = false
              }
            })
          }
		// 3
		 id('go-ex2').onclick = function () {
            id('go-ex2').disabled = true
            id('ex2').style.left = 0
            id('ex2').style.backgroundColor = '#f00'
            id('ex2').style.width = '20px'
            fx(id('ex2'), {
              left: 400,
              width: '+=20',
              backgroundColor: '#00f',
              easing: easings.bounce,
              complete: function () {
                id('go-ex2').disabled = false
              }
            })
          }
		// 4
		 id('go-ex4').onclick = function () {
            id('go-ex4').disabled = true
            id('ex4').style.fontSize = '1.2'
            fx(id('ex4'), {
              fontSize: '+=3em',
              easing: easings.spring,
              complete: function () {
                id('go-ex4').disabled = false
              }
            })
          }
		// 5
		id('go-ex5').onclick = function () {
            id('go-ex5').disabled = true
            id('ex5').style.left = 0
            fx(id('ex5'), {
              duration: 2000,
              easing: easings.easeIn,
              left: 400,
              bezier: [[150, 300], [300, -300]],
              complete: function () {
                id('go-ex5').disabled = false
              }
            })
          }
		// 6
		 function rand(n) {
            var poz = [' ', '-']
            var prefix = poz[Math.floor(Math.random() * 2)]
            var r = parseInt(prefix + Math.floor(Math.random() * n), 10)
            return r;
          }
          id('go-ex6').onclick = function () {
            id('go-ex6').disabled = true

            fx(id('ex6').getElementsByTagName('div'), {
              duration: 3000,
              easing: easings.swingTo,
              left: function () {
                return '+=' + Math.abs(rand(400))
              },
              width: '+=80',
              backgroundColor: function (el) {
                return el.getAttribute('data-to')
              },
              bezier: function (el) {
                return [[rand(300), rand(300)], [rand(300), rand(300)]]
              },
              complete: function () {
                id('go-ex6').disabled = false
              }
            })
          }
		// 7
		!function () {
          var anim = {
            stop: function () {}
          }
 
          id('ex7').onclick = function () {
            anim.stop(true);
          };
 
          id('ex7').onmouseover = function () {
            anim.stop();
            anim = fx(id('ex7'), {
              backgroundColor: '#00f',
              width: 400
            })
          };
 
          id('ex7').onmouseout = function () {
            anim.stop();
            anim = fx(id('ex7'), {
              backgroundColor: '#f00',
              width: 100
            })
          };
 
        }();
		
		// 8
		 function reset() {
            id('ex8-rotate').style[fx.transform] = 'rotate(0deg)'
            id('ex8-scale').style[fx.transform] = 'scale(1)'
            id('ex8-skew').style[fx.transform] = 'skew(0deg, 0deg)'
            id('ex8-translate').style[fx.transform] = 'translate(0px,0px)'
          }
          reset()
          id('reset-ex8').onclick = reset
          id('go-ex8').onclick = function () {
            id('go-ex8').disabled = true
            fx(id('ex8-rotate'), {
              transform: 'rotate(+=70deg)'
            })
            fx(id('ex8-scale'), {
              transform: 'scale(+=1)'
            })
            fx(id('ex8-skew'), {
              transform: 'skew(10deg,+=10deg)'
            })
            fx(id('ex8-translate'), {
              transform: 'translate(+=50px,+=25px)',
              complete: function () {
                id('go-ex8').disabled = false
              }
            })
          }
	})
    </script> 
  </body> 
</html>
